<template>
  <div class="c-ph24 c-pt40 c-pb30 c-bd-b1" v-if="themeName == 'mb5' && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30">{{distributionName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{distributionDesc}}</span>
      <span class="c-fs20 c-fc-gray" @click="clickMoreDistribution">更多</span>
    </div>
    <div @click="clickGoDetail(index)" class="c-pt30 c-flex-row" :key="index" v-for="(item,index) in distributionList">
      <div class="c-ww240 c-maxh160 c-text-hidden c-br10">
        <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pb10">
        <div class="c-fs22 c-lh36 c-text-ellipsis2">
          <span v-if='item.promotionType == "1"' class="c-fs16 theme-fc theme-bd1  c-ph8 c-pv2 c-br10">拼团</span>
          <span>{{item.name}}</span>
        </div>
        <div>
          <div class="c-text-decoration-through c-fs18 c-fc-gray c-textAlign-r" v-if="item.markPrice * 1 > 0">
            {{'￥' | iosPriceFilter}}{{item.markPrice | moneyStr}}
          </div>
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <span class="c-fc-gray c-fs18">{{item.isUpdating == 1 && item.isSync == 1 ? '暂含' : '共含'}}{{item.subCount}}节课</span>
            <span class="theme-fc c-flex-row c-aligni-end" :class="Number(item.price) != 0? 'c-fs24':'c-fs22'">
              <span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="c-ph24 c-bd-b12-f5" v-else-if="themeName == 'mb4' && !isMicroPage">
    <div class="c-pt40 c-flex-row c-aligni-center">
      <span class="c-fs30 c-p c-lh c-pl20"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{distributionName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{distributionDesc}}</span>
      <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreDistribution">查看更多</span>
    </div>

    <div class="c-flex-row c-flexw-wrap c-justify-sb c-pb30">
      <div @click="clickGoDetail(index)" v-for="(item,index) in distributionList" :key="index" class="c-ww288 c-pt30">
        <div class="c-ww288 c-maxh192 c-br10 c-text-hidden c-p">
          <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
        </div>
        <div class="c-fs24 c-lh36 c-text-ellipsis2 c-pt12 c-mb10">
          <div v-if='item.promotionType == "1"' class="c-fs16 c-hh24 c-lh24 theme-fc theme-bd1  c-ph8 c-inlineblack c-br12">拼团</div>
          <span>{{item.name}}</span>
        </div>
        <div class="c-fc-gray c-fs18 c-mb12">{{item.isUpdating == 1 && item.isSync == 1 ? '暂含' : '共含'}}{{item.subCount}}节课</div>
        <div class="c-flex-row c-aligni-center c-justify-sb">
          <span class="theme-fc c-flex-row" :class="Number(item.price) != 0? 'c-fs24':'c-fs22'">
            <span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
          </span>
          <div class="c-text-decoration-through c-fs18 c-fc-gray c-textAlign-r" v-if="item.markPrice * 1 > 0">
            {{'￥' | iosPriceFilter}}{{item.markPrice | moneyStr}}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div v-else-if="themeName == 'mb3' && !isMicroPage">
    <index-three-title-com :titleName="distributionName" :titleDesc="distributionDesc" @clickMore="clickMoreDistribution"></index-three-title-com>
    <div class="c-ph24 c-pb20 c-bd-b12-f5">
      <div @click="clickGoDetail(index)" class="c-pt24 c-flex-row" :key="index" v-for="(item,index) in distributionList">
        <div class="c-pb24">
          <div class="c-ww210 c-maxh210  c-text-hidden c-br10">
            <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
          </div>
        </div>
        <div class="c-ml20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pb24" :class="index == distributionList.length - 1 ? '':'c-bd-b1'">
          <div class="c-fs24 c-lh36 c-text-ellipsis2">
            <div v-if='item.promotionType == "1"' class="c-fs16 c-hh24 c-lh24 theme-fc theme-bd1  c-ph8 c-inlineblack c-br12">拼团</div>
            <span>{{item.name}}</span>
          </div>
          <div class="c-flex-row c-aligni-end">
            <div class="c-flex-grow1 c-w0 c-flex-row c-aligni-center">
              <span class="theme-fc c-flex-row c-mr8" :class="Number(item.price) != 0? 'c-fs24':'c-fs22'">
                <span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
              </span>
              <span v-if="item.markPrice * 1 > 0" class="c-text-decoration-through c-fs18 c-fc-gray">{{'￥' | iosPriceFilter}}{{item.markPrice | moneyStr}}</span>
            </div>
            <span class="c-fs18 c-fc-gray">{{item.isUpdating == 1 && item.isSync == 1 ? '暂含' : '共含'}}{{item.subCount}}节课</span>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="c-ph24 c-pt24 c-pb24 c-mt10 c-bg-white" v-else-if="themeName == 'mb6' && !isMicroPage">
    <div class="c-flex-row c-aligni-end c-mb10">
      <span class="c-fs28 c-fw-b">{{distributionName}}</span>
      <span class="c-fs20 c-fc-gray c-mb2 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{distributionDesc}}</span>
      <span class="c-fs18 c-fc-gray" @click="clickMoreDistribution">更多推广</span>
    </div>
    <div class="c-pb20">
      <div @click="clickGoDetail(index)" class="c-pt24 c-flex-row" :key="index" v-for="(item,index) in distributionList">
        <div class="c-ww160 c-maxh106 c-text-hidden c-p c-br10">
          <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
        </div>
        <div class="c-ml20 c-w0 c-flex-grow1 c-flex-column" :class="index == distributionList.length - 1 ? '' : 'c-pb24 c-bd-b1'">
          <div class="c-fs24 c-lh36 c-text-ellipsis2 c-hh72">
            <div v-if='item.promotionType == "1"' class="c-fs16 c-hh24 c-lh24 theme-fc theme-bd1  c-ph8 c-inlineblack c-br12">拼团</div>
            <span class="c-fw-b">{{item.name}}</span>
          </div>
          <div class="c-flex-row c-aligni-center">
            <div class="c-flex-row c-aligni-center c-flex-grow1 c-w0">
              <span class="theme-fc c-mr8" :class="Number(item.price) != 0? 'c-fs24':'c-fs22'">
                <span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
              </span>
              <span v-if="item.markPrice * 1 > 0" class="c-text-decoration-through c-fs18 c-fc-gray">{{'￥' | iosPriceFilter}}{{item.markPrice | moneyStr}}</span>
            </div>
            <span class="c-fs18 c-fc-gray">{{item.isUpdating == 1 && item.isSync == 1 ? '暂含' : '共含'}}{{item.subCount}}节课</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import indexThreeTitleCom from "@/components/templates/common/indexThreeTitleCom.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: "DistributionIndexCom",
  components: {
    indexThreeTitleCom,
  },
  props: {
    distributionName: {
      type: String,
      default: '推广',
    },
    distributionDesc: {
      type: String,
      default: '推广',
    },
    distributionList: {
      type: Array,
      default: () => []
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    showCount: {
      type: Number,
      default: 1
    },
    isShowMore: {
      type: Number,
      default: 0
    },
    isMicroPage: {
      type: Boolean,
      default: false
    },
    isShowTitle: {
      type: Boolean,
      default: false
    },
    showMoreType: {
      type: Number,
      default: 1
    },
    orderType: {
      type: Number,
      default: 0
    },
    isHiddenGap: {
      type: Number,
      default: 0
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      themeName: localStorage.getItem("themeName") || "mb5",
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0
    };
  },
  methods: {
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickMoreDistribution() {
      let toPath = '';
      toPath = this.orderType == 0
        ? `/homePage/distribution/distributionList`
        : `/homePage/distribution/distributionList?orderType=${this.orderType}`;
      this.iosAppRouteChange(toPath);
    },
    clickGoDetail(index) {
      switch (this.distributionList[index].proType * 1) {
        case 1:
          let disFrom = this.distributionList[index].promotionType == 1 ? global.ckFrom.collageColumn : '';
          let toPath = `/homePage/column/columnDetail?courseId=-1&distribution=1&ckFrom=${disFrom}&extId=${this.distributionList[index].dcId}`;
          this.iosAppRouteChange(toPath);
          break;
      }
    }
  }
};
</script>

<style scoped>
.mb4_default .theme-bd-r2 {
  border-right: 2px solid #ff300c;
}
</style>
